<template>
    <div class="main">
        <div class="workerlist flex-column">
            <div class="btns">
                <Button><Icon type="minus-circled"></Icon>关闭客服</Button>
                <Button><Icon type="gear-a"></Icon>显示设置</Button>
            </div>
            <Input size="small"></Input>
            <ul class="list flex-item" ref="workerlist">
                <li class="list-item" v-for="item in workerArr" :key="item.name" @click="highlight">
                    <!-- <i class="icon" :type=""></i> -->
                    {{(item.isAdmin ? '【管】': '') + item.name +'(' + onlineStatusText[parseInt(item.onlineStatus)] + ')'}}
                </li>
            </ul>
        </div>
        <div class="chat-box flex-column">
            <div class="chat-msg flex-item">
                <chatList></chatList>
            </div>
            <div class="chat-input">
                <InputBox :isVisitor="isVisitor" :chatType="chatType"></InputBox>
            </div>
        </div>
    </div>
</template>
<script>
import InputBox from '@/pages/index/comp/InputBox'
import chatList from '@/pages/index/comp/chatList'
export default {
    components: {
        InputBox,
        chatList
    },
    data () {
        return {
            isVisitor: false,
            chatType: 'workerType',
            workerArr: [{
                name:'jack wu',
                isAdmin: true,
                isSuperAdmin: true,
                onlineStatus: '1'//offline
            },{
                name:'abc',
                isAdmin: true,
                isSuperAdmin: false,
                onlineStatus: '1'//offline
            },{
                name:'sarah',
                isAdmin: true,
                isSuperAdmin: false,
                onlineStatus: '4'//offline
            },{
                name:'sherry',
                isAdmin: false,
                isSuperAdmin: false,
                onlineStatus: '4'//offline
            },{
                name:'cendy',
                isAdmin: false,
                isSuperAdmin: false,
                onlineStatus: '4'//offline
            },{
                name:'cen1dy',
                isAdmin: false,
                isSuperAdmin: false,
                onlineStatus: '2'//offline
            },{
                name:'cendy1',
                isAdmin: false,
                isSuperAdmin: false,
                onlineStatus: '2'//offline
            },{
                name:'cendy2',
                isAdmin: false,
                isSuperAdmin: false,
                onlineStatus: '2'//offline
            },{
                name:'cendy3',
                isAdmin: false,
                isSuperAdmin: false,
                onlineStatus: '3'//offline
            },{
                name:'cendy4',
                isAdmin: false,
                isSuperAdmin: false,
                onlineStatus: '2'//offline
            },{
                name:'cendy5',
                isAdmin: false,
                isSuperAdmin: false,
                onlineStatus: '1'//offline
            },{
                name:'cendy6',
                isAdmin: false,
                isSuperAdmin: false,
                onlineStatus: '1'//offline
            },{
                name:'cendy7',
                isAdmin: false,
                isSuperAdmin: false,
                onlineStatus: '1'//offline
            },{
                name:'cendy8',
                isAdmin: false,
                isSuperAdmin: false,
                onlineStatus: '1'//offline
            },{
                name:'cendy9',
                isAdmin: false,
                isSuperAdmin: false,
                onlineStatus: '1'//offline
            },{
                name:'cendy1re',
                isAdmin: false,
                isSuperAdmin: false,
                onlineStatus: '1'//offline
            },{
                name:'cen11dy',
                isAdmin: false,
                isSuperAdmin: false,
                onlineStatus: '1'//offline
            },{
                name:'cen2dy',
                isAdmin: false,
                isSuperAdmin: false,
                onlineStatus: '1'//offline
            },{
                name:'cen43dy',
                isAdmin: false,
                isSuperAdmin: false,
                onlineStatus: '1'//offline
            },{
                name:'cen54dy',
                isAdmin: false,
                isSuperAdmin: false,
                onlineStatus: '1'//offline
            },{
                name:'ce54ndy',
                isAdmin: false,
                isSuperAdmin: false,
                onlineStatus: '1'//offline
            },{
                name:'cendfdy',
                isAdmin: false,
                isSuperAdmin: false,
                onlineStatus: '1'//offline
            }],
            onlineStatusText: ['在线', '隐身', '离开', '忙碌', '离开']
        }
    },
    methods: {
        highlight (ev) {
            let lis = this.$refs.workerlist.querySelectorAll("li");
            console.log("lis",lis);
            for(let i=0;i<lis.length;i++){
                lis[i].classList.remove('active');
            }
            ev.target.classList.add('active');
        }
    },

}
</script>
<style lang="scss" scoped>
    .main {
        padding-left: 240px;
        position: relative;
        height: calc(100% - 100px);


        .workerlist {
            width: 240px;
            height: 100%;
            position: absolute;
            left: 0;
            border-right: solid 1px $c_36;

            .list {
                overflow-x: hidden;
                overflow-y: auto;
                
                li {
                    height: 20px;
                    line-height: 20px;
                    color: $c_3;
                    padding-left: 15px;

                    &.active {
                        background: $c_23;  
                        color: $c_1;                      
                    }

                }
            }

        }

        .chat-box {
            height: 820px;

            .chat-msg {
                overflow: hidden;
            }

            .chat-input {
                height: 165px;
            }
        }
    }
</style>
